import React, { Fragment } from 'react';
import { Button, Drawer, Popconfirm, Space, Table } from 'antd';
import AddDept from './addDept';
import EditDept from './editDept';
import DeptDetail from './deptDetail';

class Demo2 extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state={
      tableData:[],
      addDrawerVisible:false,
      editDrawerVisible:false,
      currentRecord:{},
      isEditMode: false, // 新增字段来标识是编辑模式还是新增模式
    }
  }

  refreshData=()=>{
    const url = "http://1.94.134.166:8805/dept/list?parentId=0";
    const config={
      method:'GET',
      headers:{
        Authorization:localStorage.getItem('Authorization'),
      },
    };
    fetch(url,config)
      .then((response)=>response.json())
      .then((res)=>{
        console.log(res);
        this.setState({tableData:res.data});
      });
  }
  componentDidMount() {
    this.refreshData();
  }

  handleAdd=()=>{
    this.setState({
      isEditMode: false, // 设置为新增模式
      addDrawerVisible:true,
    });
  }

  handleEdit=(record)=>{
    this.setState({
      isEditMode: true, // 设置为编辑模式
      editDrawerVisible:true,
      currentRecord:record,
    });
  }

  handleDelete=(record)=>{
    console.log(record);
    const url = "http://1.94.134.166:8805/dept/"+record.deptId;
    const config={
      method:'DELETE',
      headers:{
        Authorization:localStorage.getItem('Authorization'),
      },
    };
    fetch(url,config)
      .then((response)=>response.json())
      .then((res)=>{
        console.log(res);
        this.refreshData();
      });
  }

  onAddDrawerClose = () => {
    this.setState({addDrawerVisible:false});
  };

  onEditDrawerClose=()=>{
    this.setState({editDrawerVisible:false});
  }

  columns = [
    {
      title: '序号',
      key:'index',
      render:(text,record,index)=>{
        return(
          <span >
            {index+1}
          </span>
        )
      }
    },
    {
      title: '部门名称',
      dataIndex: 'deptName',
      key: 'deptName',
    },
    {
      title: '部门拼音',
      dataIndex: 'deptPy',
      key: 'deptPy',
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      key: 'phone',
    },
    {
      title: 'Action',
      key:'action',
      render:(text,record,index)=>{
        console.log(record);
        let confirmTitle1="是否修改"+record.deptName;
        let confirmTitle2="是否删除"+record.deptName;
        return(
          <Space size="middle">
            <Popconfirm
              title={confirmTitle1}
              onConfirm={()=>{this.handleEdit(record)}}
              okText="Yes"
              cancelText="No"
            >
              <a> Edit </a>
            </Popconfirm>

            <Popconfirm
              title={confirmTitle2}
              onConfirm={()=>{this.handleDelete(record)}}
              okText="Yes"
              cancelText="No"
            >
              <a> Delete </a>
            </Popconfirm>
          </Space>


        )
      }
    }
  ];


  render() {
    return (
      <>
        <Button type="primary" onClick={this.handleAdd}>
          新增部门
        </Button>
        <Table dataSource={this.state.tableData} columns={this.columns} />;

        <Drawer
          title={this.state.isEditMode ? "修改部门" : "新增部门"}
          placement="right"
          onClose={this.state.isEditMode ? this.onEditDrawerClose : this.onAddDrawerClose}
          width={"50%"}
          destroyOnClose={true}
          open={this.state.isEditMode ? this.state.editDrawerVisible : this.state.addDrawerVisible}
        >
          <DeptDetail
            editData={this.state.currentRecord}
            refreshList={this.refreshData}
            closeDrawer1={this.onEditDrawerClose}
            closeDrawer2={this.onAddDrawerClose}
            iseditmode={this.state.isEditMode}
          />
        </Drawer>

        {/*{this.state.isEditMode ? (*/}
        {/*  <EditDept*/}
        {/*    editData={this.state.currentRecord}*/}
        {/*    refreshList={this.refreshData}*/}
        {/*    closeDrawer={this.onEditDrawerClose}*/}
        {/*  />*/}
        {/*) : (*/}
        {/*  <AddDept*/}
        {/*    refreshList={this.refreshData}*/}
        {/*    closeDrawer={this.onClose}*/}
        {/*  />*/}
        {/*)}*/}

      </>
    );
  }
}

export default Demo2;
